<template>
  <el-tabs
    v-model="data.activeTab"
    class="demo-tabs"
    @tab-click="handleClickTab"
  >
    <el-tab-pane label="异常订单" name="charge">
      <Table
        v-if="data.activeTab === 'charge'"
        ref="tableRef"
        :url="URL_PAGINGABNORMALORDERT"
        :columns="data.columns"
        :handles="data.handles"
        :query="data.query"
      ></Table>
    </el-tab-pane>
    <el-tab-pane label="待支付订单" name="occupy">
      <Table
        v-if="data.activeTab === 'occupy'"
        ref="tableUnSettleRef"
        :url="URL_PAGINGUNPAIDORDERT"
        :columns="unSettleData.columns"
        :handles="unSettleData.handles"
        :query="unSettleData.query"
      ></Table
    ></el-tab-pane>
  </el-tabs>
</template>
  
  <script lang="ts" setup name="pendingOrderList">
import Table from '@/components/table/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  URL_PAGINGABNORMALORDERT,
  URL_PAGINGUNPAIDORDERT,
  unpaidTurnHistoryOrder,
} from '@/service/apis/order';

const router = useRouter();

const tableRef = ref();
const tableUnSettleRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      if (data.activeTab === 'occupy') {
        tableUnSettleRef.value?.getData();
      } else {
        tableRef.value?.getData();
      }
    }
  });
});

const data = reactive({
  activeTab: 'charge',
  columns: [
    {
      prop: 'startChargeSeq',
      label: '充电单号',
      width: 260,
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'mobile',
      label: '用户手机号',
      width: 120,
    },
    {
      prop: 'orgName',
      label: '归属企业',
      width: 160,
    },
    {
      prop: 'plateNumber',
      label: '充电车辆',
    },
    {
      prop: 'chargeType',
      label: '充电方式',
      width: 160,
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'startTime',
      label: '开始充电时间',
      width: 160,
    },
    {
      prop: 'totalPower',
      label: '已充电量（度）',
      width: 140,
    },
    {
      prop: 'stationName',
      label: '电站名称',
      width: 160,
    },
    {
      prop: 'connectorCode',
      label: '终端编码',
      width: 160,
    },
    {
      prop: 'operatorName',
      label: '运营商',
      width: 160,
    },
    {
      prop: 'chargeSource',
      label: '订单来源',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'abnormalCause',
      label: '异常原因',
      width: 160,
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'flowStartChargeSeq',
      label: '流量方流水号',
      width: 160,
    },
    {
      prop: 'operatorSerialNumber',
      label: '运营商流水号',
      width: 160,
    },
  ],
  handles: [
    {
      label: '处理',
      permission: 'pendingOrderList.handle',
      handle: (row: any) => {
        console.log('详情---', row);
        router.push({
          name: 'pendingOrderHandle',
          query: { id: row.orderId },
        });
      },
    },
  ],
  query: [
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '充电单号',
      prop: 'startChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入充电单号',
      },
    },
    {
      label: '终端编码',
      prop: 'connectorCode',
      comName: 'input',
      props: {
        placeholder: '请输入终端编码',
      },
    },
    {
      label: '开始充电',
      prop: 'data',
      comName: 'date',
      keys: ['startChargingStartTime', 'startChargingEndTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '订单来源',
      prop: 'chargeSource',
      comName: 'select',
      props: {
        placeholder: '请选择订单来源',
        options: [] as any,
      },
    },
    {
      label: '异常原因',
      prop: 'abnormalCause',
      comName: 'select',
      props: {
        placeholder: '请选择异常原因',
        options: [] as any,
      },
    },
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
    {
      label: '运营商',
      prop: 'operatorName',
      comName: 'input',
      props: {
        placeholder: '请输入运营商',
      },
    },
    {
      label: '流量方流水号',
      prop: 'flowStartChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入流量方流水号',
      },
    },
    {
      label: '运营商流水号',
      prop: 'operatorSerialNumber',
      comName: 'input',
      props: {
        placeholder: '请输入运营商流水号',
      },
    },
  ],
});
const unSettleData = reactive({
  columns: [
    {
      prop: 'startChargeSeq',
      label: '充电单号',
      width: 260,
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
      width: 160,
    },
    {
      prop: 'mobile',
      label: '用户手机号',
      width: 120,
    },
    {
      prop: 'orgName',
      label: '归属企业',
      width: 160,
    },
    {
      prop: 'plateNumber',
      label: '充电车辆',
    },
    {
      prop: 'chargeType',
      label: '充电方式',
      dic: [] as any,
      type: Number,
      width: 120,
    },
    {
      prop: 'totalAmount',
      label: '订单金额',
    },
    {
      prop: 'startTime',
      label: '开始充电时间',
      width: 160,
    },
    {
      prop: 'endTime',
      label: '结束充电时间',
      width: 160,
    },
    {
      prop: 'chargedTime',
      label: '充电时长',
    },
    {
      prop: 'totalPower',
      label: '已充电量（度）',
      width: 140,
    },
    {
      prop: 'startSoc',
      label: '起始SOC',
      template: (row: any, index: number) => {
        if (row.startSoc == 0) {
          return `${row?.startSoc?.toString()}%` || '--';
        } else {
          return `${row?.startSoc}%` || '--';
        }
      },
    },
    {
      prop: 'endSoc',
      label: '结束SOC',
      template: (row: any, index: number) => {
        if (row.endSoc == 0) {
          return `${row?.endSoc?.toString()}%` || '--';
        } else {
          return `${row?.endSoc}%` || '--';
        }
      },
    },
    {
      prop: 'stationName',
      label: '电站名称',
      width: 160,
    },
    {
      prop: 'connectorCode',
      label: '终端编码',
      width: 140,
    },
    {
      prop: 'operatorName',
      label: '运营商',
      width: 160,
    },
    {
      prop: 'chargeSource',
      label: '订单来源',
      dic: [] as any,
      type: Number,
    },
  ],
  handles: [
    {
      label: '详情',
      permission: 'pendingOrderList.see',
      handle: (row: any) => {
        console.log('详情---', row);
        router.push({
          name: 'pendingOrderDetail',
          query: { id: row.orderId },
        });
      },
    },
    {
      label: '手动结算',
      permission: 'pendingOrderList.settlement',
      handle: (row: any) => {
        ElMessageBox.confirm(
          '确定要手动结算当前待支付订单吗？（手动结算不使用优惠券）',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          unpaidTurnHistoryOrder(row.orderId).then((res: any) => {
            tableUnSettleRef.value.getData();
          });
        });
        // console.log('详情---', row);
        // router.push({
        //   name: 'pendingOrderDetail',
        //   query: { id: row.id },
        // });
      },
    },
  ],
  query: [
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '充电单号',
      prop: 'startChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入充电单号',
      },
    },
    {
      label: '终端编码',
      prop: 'connectorCode',
      comName: 'input',
      props: {
        placeholder: '请输入终端编码',
      },
    },

    {
      label: '开始充电',
      prop: 'startData',
      comName: 'date',
      keys: ['startChargingStartTime', 'startChargingEndTime'],
      props: {
        type: 'daterange',
      },
    },

    {
      label: '结束充电',
      prop: 'endData',
      comName: 'date',
      keys: ['endChargingStartTime', 'endChargingEndTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '订单来源',
      prop: 'chargeSource',
      comName: 'select',
      props: {
        placeholder: '请选择订单来源',
        options: [] as any,
      },
    },
    {
      label: '充电车辆',
      prop: 'plateNumber',
      comName: 'input',
      props: {
        placeholder: '请输入充电车辆',
      },
    },
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
    {
      label: '充电方式',
      prop: 'chargeType',
      comName: 'select',
      props: {
        placeholder: '请选择充电方式',
        options: [] as any,
      },
    },
    {
      label: '运营商',
      prop: 'operatorName',
      comName: 'input',
      props: {
        placeholder: '请输入运营商',
      },
    },
    {
      label: '运营商属性',
      prop: 'operatorAttr',
      comName: 'select',
      props: {
        placeholder: '请选择运营商属性',
        options: [] as any,
      },
    },
  ],
});

if (import.meta.env.VITE_ENV_TYPE === 'lznt') {
  data.columns.splice(17, 0, {
    prop: 'shortcutCode',
    label: '快捷码',
  });
  data.query[2] = {
    label: '快捷码',
    prop: 'shortcutCode',
    comName: 'input',
    props: {
      placeholder: '请输入快捷码',
    },
  };
  data.query.splice(3, 0, {
    label: '终端编码',
    prop: 'connectorCode',
    comName: 'input',
    props: {
      placeholder: '请输入终端编码',
    },
  });

  unSettleData.columns.splice(14, 0, {
    prop: 'shortcutCode',
    label: '快捷码',
  });
  unSettleData.query[2] = {
    label: '快捷码',
    prop: 'shortcutCode',
    comName: 'input',
    props: {
      placeholder: '请输入快捷码',
    },
  };
  unSettleData.query.splice(3, 0, {
    label: '终端编码',
    prop: 'connectorCode',
    comName: 'input',
    props: {
      placeholder: '请输入终端编码',
    },
  });
}

queryDicByParent({
  listDtos: [
    'chargeSourceEnum',
    'chargeTypeEnum',
    'abnormalBasic',
    'operatorProperties',
  ],
}).then((res: any) => {
  if (res) {
    if (import.meta.env.VITE_ENV_TYPE === 'lznt') {
      data.query[6].props.options = [...res.chargeSourceEnum];
      data.query[7].props.options = [...res.abnormalBasic];
      data.columns[11].dic = [...res.chargeSourceEnum];
      data.columns[12].dic = [...res.abnormalBasic];
      data.columns[5].dic = [...res.chargeTypeEnum];
      unSettleData.columns[5].dic = [...res.chargeTypeEnum];
      unSettleData.columns[17].dic = [...res.chargeSourceEnum];
      unSettleData.query[8].props.options = [...res.chargeSourceEnum];
      unSettleData.query[11].props.options = [...res.chargeTypeEnum];
      unSettleData.query[13].props.options = [...res.operatorProperties];
    } else {
      data.query[5].props.options = [...res.chargeSourceEnum];
      data.query[6].props.options = [...res.abnormalBasic];
      data.columns[5].dic = [...res.chargeTypeEnum];
      data.columns[11].dic = [...res.chargeSourceEnum];
      data.columns[12].dic = [...res.abnormalBasic];
      unSettleData.query[7].props.options = [...res.chargeSourceEnum];
      unSettleData.query[10].props.options = [...res.chargeTypeEnum];
      unSettleData.query[12].props.options = [...res.operatorProperties];
      unSettleData.columns[16].dic = [...res.chargeSourceEnum];
      unSettleData.columns[5].dic = [...res.chargeTypeEnum];
    }
  }
});
const handleClickTab = (e: any) => {};
</script>